<template>
  <div class="device">
    <div class="header">
      <div class="left">
        <div class="title">设备管理</div>
        <div class="button">
          <el-button icon="el-icon-plus" @click="add">新增</el-button>
          <el-button icon="el-icon-delete" @click="removeAll">删除</el-button>
          <el-button icon="el-icon-connection" @click="linkAll"
            >一键连接</el-button
          >
          <el-button icon="el-icon-circle-close" @click="disconnectAll"
            >一键断开</el-button
          >
        </div>
      </div>
      <div class="right">
        <search-input @searchResult="search"></search-input>
      </div>
    </div>
    <div class="container">
      <el-table
        ref="tableData"
        :data="tableData"
        style="width: 100%"
        max-height="500"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column prop="deviceName" label="设备名" align="center">
        </el-table-column>
        <el-table-column prop="systemName" label="设备码" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <!-- <el-switch
              v-model="scope.row.state"
              :active-value="0"
              :inactive-value="1"
            ></el-switch> -->
            {{ scope.row.state === 0 ? "已连接" : "已断开" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <i
              class="el-icon-link"
              style="
                font-size: 24px;
                color: #365eff;
                margin-right: 16px;
                cursor: pointer;
              "
              @click="link(scope.row.deviceId)"
            ></i>
            <i
              class="el-icon-circle-close"
              style="
                font-size: 24px;
                color: #365eff;
                margin-right: 16px;
                cursor: pointer;
              "
              @click="disconnect(scope.row.deviceId)"
            ></i>
            <i
              class="el-icon-edit"
              style="
                font-size: 24px;
                color: #365eff;
                margin-right: 16px;
                cursor: pointer;
              "
              @click="edit(scope.row)"
            ></i>
            <i
              class="el-icon-delete"
              style="font-size: 24px; color: red; cursor: pointer"
              @click="remove(scope.row.deviceId)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <Pagination :total="total" @pagination="onPaginationChange"></Pagination>
    </div>
    <transition name="el-fade-in-linear">
      <div v-if="maskShow" class="transition-box mask">
        <div class="form">
          <div class="title">{{ editFlag ? "修改设备" : "添加设备" }}</div>
          <el-form
            ref="ruleForm"
            label-position="top"
            label-width="80px"
            :model="addForm"
            :rules="rules"
          >
            <el-form-item label="设备名" prop="deviceName">
              <el-input
                v-model="addForm.deviceName"
                placeholder="请输入设备名称"
                :disabled="editFlag ? true : false"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备码" prop="systemName">
              <el-input
                v-model="addForm.systemName"
                placeholder="请输入设备码"
                :disabled="editFlag ? true : false"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-switch
                v-model="addForm.state"
                :active-value="0"
                :inactive-value="1"
              ></el-switch>
            </el-form-item>
          </el-form>
          <div class="button">
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </transition>

    <success-tip v-if="success" :text="text"></success-tip>
  </div>
</template>

<script>
import {
  getList,
  addDevice,
  updateDevice,
  deleteDevice,
  linkDevice,
  disconnectDevice,
} from "@/api/device";
import { disconnect } from "echarts";
export default {
  name: "Device",
  data() {
    return {
      maskShow: false,
      addForm: {
        deviceName: "",
        systemName: "",
        state: false,
      },
      success: false,
      editFlag: false,
      text: "保存成功",
      tableData: [],
      total: 0,
      searchData: {
        keyword: "",
        pageSize: 10,
        pageNum: 1,
      },
      ids: [],
      rules: {
        deviceName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        systemName: [
          { required: true, message: "请输入设备码", trigger: "blur" },
        ],
      },
      timer: null,
    };
  },
  methods: {
    search(val) {
      this.searchData.keyword = val;
      this.getTableData();
    },
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const submitFunction = this.editFlag ? updateDevice : addDevice;
          submitFunction(this.addForm).then((res) => {
            this.successTip(this, this.editFlag ? "修改成功" : "添加成功");
            this.getTableData();
          });
          this.resetForm();
          this.maskShow = false;
        } else {
          return false;
        }
      });
    },
    async add() {
      this.maskShow = true;
      this.editFlag = false;
    },
    edit(data) {
      this.editFlag = true;
      this.maskShow = true;
      this.addForm = {
        deviceName: data.deviceName,
        systemName: data.systemName,
        state: data.state,
        deviceId: data.deviceId,
      };
    },
    cancel() {
      this.resetForm();
      this.maskShow = false;
    },
    remove(id) {
      this.ids.push(id);
      this.deleteByIds();
      this.ids = [];
    },
    deleteByIds() {
      deleteDevice({ ids: this.ids }).then((res) => {
        this.getTableData();
        this.successTip(this, "删除成功");
      });
    },
    removeAll() {
      this.deleteByIds();
    },
    link(id) {
      this.ids.push(id);
      this.links();
      this.ids = [];
    },
    disconnect(id) {
      this.ids.push(id);
      this.disconnects();
      this.ids = [];
    },
    links() {
      linkDevice(this.ids).then((res) => {
        this.getTableData();
        this.successTip(this, "操作成功");
      });
    },
    disconnects() {
      disconnectDevice({ ids: this.ids }).then((res) => {
        this.getTableData();
        this.successTip(this, "断开连接");
      });
    },
    disconnectAll() {
      this.disconnects();
    },
    linkAll() {
      this.links();
    },
    handleSelectionChange(val) {
      this.ids = [];
      for (let key in val) {
        this.ids.push(val[key].deviceId);
      }
    },
    onPaginationChange({ page, limit }) {
      this.searchData.pageNum = page;
      this.getTableData();
    },
    async getTableData() {
      await getList(this.searchData)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.tableData = [];
          this.total = 0;
        });
    },
    resetForm() {
      this.addForm = {
        deviceName: "",
        systemName: "",
        state: false,
      };
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss">
.device {
  position: relative;
  padding: 36px 42px;

  .header {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        height: 26px;
        line-height: 26px;
        font-size: 26px;
        color: #333333;
      }

      .button {
        margin-top: 36px;
        display: flex;
        height: 48px;

        .el-button {
          padding: 0 28px;
          font-size: 16px;
          font-weight: bold;
          height: 48px;
          border-radius: 12px;
          border: 1px solid #e4e4e4;
        }

        .el-button + .el-button {
          margin-left: 30px;
        }
      }
    }

    .right {
      height: 66px;
      line-height: 66px;
    }
  }

  .container {
    margin-top: 24px;
    width: 100%;
    height: 688px;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);

    .el-table {
      height: 688px;
      max-height: 100% !important;
      font-size: 16px;

      &::before {
        height: 0;
      }

      .el-table__header-wrapper {
        .el-table__header th {
          padding: 0;
          height: 84px;
          line-height: 84px;
          background-color: #f7faff;
          font-size: 18px;
          border: none;
        }
      }

      .el-table__body-wrapper {
        height: 600px;
        max-height: 100% !important;

        tr {
          height: 80px;

          &:hover {
            td.el-table__cell {
              box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
              background: #ffffff;
            }
          }
        }
      }
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.5);

    .form {
      position: absolute;
      top: calc(50% - 200px);
      left: calc(50% - 308px);
      width: 616px;
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;

      .title {
        margin: 24px;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
      }

      .el-form {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 568px;

        .el-form-item {
          margin-bottom: 20px;
          padding: 0 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 274px;
          height: 88px;
          background: #f7f7f7;
          border-radius: 12px;

          .el-form-item__label {
            padding: 0;
            line-height: 14px;
            font-weight: 400;
            color: #666;
          }

          .el-form-item__content {
            height: 20px;
            line-height: 20px;

            .el-input {
              .el-input__inner {
                padding: 0;
                height: 20px;
                width: 100%;
                line-height: 20px;
                border: none;
                border-radius: 0;
                background-color: #f7f7f7;
                font-size: 16px;
                font-weight: 500;
                color: #333;
              }
            }
          }
        }
      }

      .button {
        margin: 10px 0 36px;
        padding: 0 64px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 48px;

        .el-button {
          width: 204px;
          height: 48px;
          border-radius: 12px;
        }
      }
    }
  }
}
</style>
